// 等待页面所有资源加载完毕，就回去执行回调函数
window.addEventListener('load', function () {
  let arr = ["英雄介绍","局内道具","召唤师技能"]
  // 获取面包屑下面的
  let a =document.querySelector(".crumbs")
  let crumbs = a.querySelector("span");

  // 获取页面title
  let title =document.querySelector(".herolist-title")
  // 获取导航栏 
  let nav =document.querySelector(".herolist-nav");
  let lis = nav.querySelectorAll("li")

  // 获取对应页面
  let hero  = document.querySelector(".herolist-hero")
  let prop = document.querySelector(".herolist-prop")
  let skill = document.querySelector(".herolist-skill")

  // 给子导航栏添加点击事件
  for (let i = 0; i < lis.length; i++) {
    // console.log(lis);
    lis[i].addEventListener('click',function() {

      for (let i = 0; i < lis.length; i++) {
        lis[i].className=""
        hero.style.display = "none"
        prop.style.display = "none"
        skill.style.display = "none"
      }
      this.className="active"
      crumbs.innerHTML = arr[i];
      title.innerHTML = arr[i];
      console.log(i);
      if(i == 0){
        hero.style.display = "block"
      }else if(i == 1){
        prop.style.display = "block"
      }else{
        skill.style.display = "block"
      }
    })
    
    
  }
  
  // 给英雄筛选添加点击事件
  let select = document.querySelector(".types-center");
  let radios = select.querySelectorAll("input");
  let ul = document.querySelector(".herolist-content");
  let content = [
    // 本周免费
    [["苍",2],["影",3],["少司缘",4],["元流之子(坦克)",5]],
    // 推荐
    [["亚连",11],["姬小满",12]],
    // 全部
    [["空空儿",1],["苍",2],["影",3],["少司缘",4],["元流之子(坦克)",5]
      ,["元流之子(法师)",6],["大司命",7],["敖隐",8] ,["海诺",9],["朵莉亚",10]
     ,["亚连",11],["姬小满",12]],
    // 坦克
    [["元流之子(坦克)",5],["亚连",11]],
    // 战士
    [["影",3],["大司命",7],["姬小满",12]],
    // 刺客
    [["姬小满",12]],
    // 法师
    [["元流之子(法师)",6],["海诺",9]],
    // 射手
    [["苍",2],["敖隐",8]],
    // 辅助
    [["空空儿",1],["少司缘",4],["朵莉亚",10]]
  ]
  // let lis1 = ul.querySelectorAll("li");
  for (let i = 0; i < radios.length; i++) {
    console.log(radios[i]);
    radios[i].addEventListener('click',function() {
      // 清除所有的li
      ul.innerHTML = "";
      console.log(i);
      console.log(content[i].length);
      for (let j = 0; j < content[i].length; j++) {
        //生成li
        let li = document.createElement("li");
        // 把li添加到ul里面
        ul.appendChild(li);
        // 生成li下面的图片
        let img = document.createElement("img");
        // 生成li下面的名字
        let span = document.createElement("span");
        // 把图片和名字添加到li里面
        li.appendChild(img);
        li.appendChild(span);
        // 给图片添加src
        img.src = `../../assets/hero/hero/${content[i][j][1]}.webp`;
        // 给span添加名字
        span.innerHTML = content[i][j][0];
      }
    })
    
  }

})